<template>
  
  <div class="oauth_login_box">
    <div class="background_color">
      <div class="oauth_form_box">
        <Row style="width: 100%;">
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
          <div class="oauth_form_box_login">
            <Card style="width:100%; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); border-color: #eee;">
              <List :border="false" :split="false" size="small">
                <ListItem>
                  <p class="color_main" style="line-height: 32px;">支付方式选择</p>
                </ListItem>
                <ListItem class="color_secondary">商户：{{entity.orderName}}</ListItem>
                <ListItem class="color_secondary">订单号：{{entity.orders[0].orderId}}</ListItem>
              </List>
              <Row style="height: 80px;margin-top:10px">
                <Col :xs="2" :sm="4" :md="6" :lg="8">
                </Col>
                <Col :xs="20" :sm="16" :md="12" :lg="8" style="height: 100%; align-items: center; text-align: center;">
                <p class="color_secondary" style="height: 20px;">应付金额:</p>
                <p class="color_main" style="color: #464c5b; font-size: 25px;line-height: 50px; ">¥ {{entity.orderAmount}}</p>
                </Col>
                <Col :xs="2" :sm="4" :md="6" :lg="8" style="text-align: end;">
                <p class="color_secondary" style="height: 30px; line-height: 20px;">支付剩余时间</p>
                <p style="height: 30px; line-height: 20px;color: red;">{{ formattedTime }}</p>
                </Col>
              </Row>
              <Divider />
              <p class="color_secondary" style="line-height: 32px;color: #111827;font-size: 16px;">选择支付方式</p>
              <RadioGroup v-model="payWayCode" style="width: 100%;">
                <div class="pay-way" v-for="item in entity.paymentWays" :key="item.payWayCode" item-layout="vertical"
                  @click="selectPayWay(item)">
                  <Row align="middle" justify="center">
                    <Col span="2">
                    <Avatar :src="item.payWayIcon" />
                    </Col>
                    <Col span="20">{{ item.payWayLabel }}</Col>
                    <Col span="2">
                    <Radio :label="item.payWayCode">
                      <span></span>
                    </Radio>
                    </Col>
                  </Row>
                </div>
              </RadioGroup>

              <Divider size="small" />


              <div class="oauth_form">
                <Button type="primary" size="large" @click="handleSubmit(signinType)" long
                  :loading="ablePayment" :disabled="ablePayment || payWayCode==''" >立即付款 {{ '¥  '+entity.orderAmount }}</Button>
                <Button style="margin-top: 10px;" size="large" @click="handleSubmit(signinType)" long
                  :loading="loginLoading">取消付款</Button>
              </div>
            </Card>

            <Card style="width:100%;margin-top:30px">
              <p class="color_main" style="font-size:18px;font-weight:500; line-height: 32px;">订单详情</p>
              <Row class="amount-item">
                <Col span="20">商品金额</Col>
                <Col span="4" style="text-align: right;">
                <p>{{ '¥  '+entity.orderAmount }}</p>
                </Col>
              </Row>
              <Row class="amount-item">
                <Col span="20">优惠金额</Col>
                <Col span="4" style="text-align: right;color: red;">
                <p>{{ '¥  '+entity.discount }}</p>
                </Col>
              </Row>

              <Divider size="small" style="margin: 14px 0;" />
              <Row class="amount-item" style="font-weight: 700;">
                <Col span="20">实付金额</Col>
                <Col span="4" style="text-align: right;">
                <p>{{ '¥  '+ entity.payAmount }}</p>
                </Col>
              </Row>
            </Card>
          </div>
          </Col>
        </Row>
      </div>
    </div>
    <Spin style="width: 100%;height:100%" size="large" fix v-if="spinShow">初始化收银台...</Spin>
  </div>
  
</template>
<script>
import {
  Form,
  FormItem,
  Input,
  Avatar,
  Button,
  Message,
  Tabs,
  TabPane,
  Row,
  Col
} from "view-design";
import config from "@/utils/config";
import {initCash,initPay} from "@/api/cash";
export default {
  components: {
    Form,
    FormItem,
    Input,
    Avatar,
    Button,
    Tabs,
    TabPane,
    Row,
    Col,
  },
  data() {
    return {
      loginInLogoUrl: require("@/assets/shimingrenzheng.png"),
      showQrCodeSignIn: false,
      loginLoading: false,
      config: config,
      disableSendSms: false,
      clientName: "",
      clientIcon: config.publicPath + "static/unknown_oauth2_client.svg",
      signinType: "passwordFormRule",
      payWayCode: '',
      spinShow:true,
      entity:{
        orderSource:'',
        orderName:'',
        orderAmount:0,
        payAmount:'',
        payLeftTime:'',
        payChannel:'',
        paymentWays:[],
        discount:0,
      },
      ablePayment:false,
      formData: {
        user: null,
        password: null,
        smsCode: null,
        phone: null
      },
      inputHours: 0,
      inputMinutes: 0,
      inputSeconds: 0,
      remainingSeconds: 0,
      timer: null,
      isRunning: false
      
    };
  },
  async beforeMount() {
    let { orderId, payScene, payWay, callbackUrl, token } = this.$route.query;
    if (!orderId || !token) {
      this.$Modal.error({
        title: "参数异常",
        content: "参数异常，请检查！"
      });
      return
    }
    await this.initCacsh();
  },

  computed: {
    formattedTime() {
      if(!this.remainingSeconds||this.remainingSeconds<=0){
        return '--'
      }
      const hours = Math.floor(this.remainingSeconds / 3600)
      const minutes = Math.floor((this.remainingSeconds % 3600) / 60)
      const seconds = this.remainingSeconds % 60
      if(hours>0){
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
      }else{
        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
      }
    }
  },

  methods: {
    selectPayWay(item) {
      console.log('selectPayWay:', item)
      this.payWayCode = item.payWayCode
    },
    async initCacsh(){
      let { orderId, payScene, payWay, callbackUrl, token } = this.$route.query;
      const config={
        headers:{
          token:token
        }
      }
      const data={
        orderId:orderId,
        payScene:payScene,
        payWay: this.payWayCode,
        callbackUrl:callbackUrl
      }
      const refsult = await initCash(data, config);
      if(refsult.status===200){
        const {ret,data,msg}=refsult.data
        if(ret===0){
          if(data){
            this.entity={
              ...data
            }
            if(data.paymentWays && data.paymentWays.length>0){
              this.ablePayment=false
            }
            if(data.payLeftTime && data.payLeftTime>0){
              this.startCountdown(data.payLeftTime)
            }
          }
        }else{
          this.$Modal.error({
            title: "初始化收银台异常",
            content: msg|| "初始化收银台异常！"
          });
        }
      }else{
        this.$Modal.error({
            title: "初始化收银台异常",
            content: "初始化收银台异常！"
          });
      }
      console.log('refsult:',refsult)
      this.spinShow=false
    },
    async handleSubmit(rule) {
      if (!this.payWayCode) {
        Message.error("请选择支付方式");
        return;
      }
      let { orderId, payScene, payWay, callbackUrl, token } = this.$route.query;
      const config={
        headers:{
          token:token
        }
      }
      const data={
        orderId:orderId,
        payScene:payScene,
        payWay: this.payWayCode,
        callbackUrl:callbackUrl
      }

      // TODO 先查询订单状态，然后调用支付
      const refsult = await initPay(data, config);
      console.log('refsult',refsult)
    },
    
    startCountdown(remainingSeconds) {
      this.remainingSeconds=remainingSeconds
      // 计算总秒数
      if (this.remainingSeconds <= 0) {
        return
      }
      
      // 清除之前的计时器
      this.clearTimer()
      
      this.isRunning = true
      
      // 立即更新显示
      this.updateDisplay()
      
      // 每秒更新一次
      this.timer = setInterval(() => {
        this.remainingSeconds--
        this.updateDisplay()
        
        if (this.remainingSeconds <= 0) {
          this.clearTimer()
          this.isRunning = false
          alert('时间到！')
        }
      }, 1000)
    },
    resetCountdown() {
      this.clearTimer()
      this.inputHours = 0
      this.inputMinutes = 0
      this.inputSeconds = 0
      this.remainingSeconds = 0
      this.isRunning = false
      
    },
    updateDisplay() {
      // 计算属性会自动更新
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    }
    
  },
  watch: {
    initialSeconds(newVal) {
      // 当初始时间变化时重置倒计时
      this.resetCountdown(newVal)
    }
  },
  beforeDestroy() {
    this.clearTimer()
  }
};
</script>
<style lang="less" scoped>
.color_main {
  color: #464c5b;
  font-size: 20px;
  font-weight: 600;
  font-family: '微软雅黑';
}

.color_secondary {
  font-size: 15px;
  color: #6B7280;
}

.oauth_login_box {
  height: 100%;
  //background-image: url(../../assets/login_bg.jpg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  .background_color {
    height: 100%;
    //background-color: rgba(0, 0, 0, 0.288235294117647);
    display: flex;
    align-items: center;
    justify-content: center;


    .ivu-list-vertical .ivu-list-item-meta {
      margin-bottom: 1px;

      .ivu-list-vertical .ivu-list-item-meta-title {
        /* margin-bottom: 12px; */
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
        line-height: 34px;
        height: 100%;
      }
    }

    .logo_box {
      display: flex;
      justify-content: center;
      padding: 20px;

      .yun_logo {
        width: 50px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .name_font {
        font-weight: 700;
        font-style: normal;
        font-size: 28px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
      }
    }

    .oauth_form_box {
      display: flex;
      justify-content: center;
      //background-color: #efefef;
      background-color: rebeccapurple;
      width: 50%;
      height: 90%;

      .oauth_form_box_login {
        width: 100%;
        min-height: 100%;
        background: #ffffff;

        .triangle-topright {
          width: 40px;
          height: 40px;
          position: absolute;
          right: 0px;
          top: 0px;
          z-index: 2;

          &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-bottom: 40px solid #ffffff;
            border-right: 40px solid transparent;
            position: absolute;
            left: 0;
            top: 0;
          }

          &>img {
            width: 40px;
            height: 40px;
            position: relative;
          }
        }

        .oauth_form {
          background: #ffffff;
          width: 100%;
          height: 100px;

          .qr-code-main {
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }

      .app_qrcode_box {
        width: 300px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;

        .app_qrcode {
          .app_qrcode_img {
            width: 200px;
            height: 200px;
          }
        }

        .official_documents_and_correspondence {
          padding-top: 20px;
          transform-origin: 76.5px 28px 0px;
          font-weight: 400;
          font-style: normal;
          font-size: 20px;
        }
      }

      .pay-way {
        height: 82px;
        padding: 16px;
        gap: 0px 0px;
        flex-wrap: wrap;
        align-content: center;
        margin-top: 10px;
        align-items: center;
        align-content: center;
        border: 1px solid #E5E7EB;
        box-sizing: border-box;
        padding-top: 15px;
        border-radius: 12px;
        opacity: 1;

        .ivu-avatar {
          width: 45px;
          height: 45px;
          border-radius: 10%;
        }

        .ivu-radio-group {
          font-size: 16px;
          font-family: Roboto;
          font-weight: normal;
          line-height: 24px;
          letter-spacing: 0px;
        }
      }

      .amount-item {
        height: 35px;
        align-items: center;
        line-height: 35px;
        color: #4B5563;
      }
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
